<template>
  <div class="content-wrapper">
    <common-title title="线索分布情况（个）" imgSrc="../../../../src/assets/img/left-bottom.png"></common-title>
    <div class="chart-wrapper" ref="useChart">
    </div>
  </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import commonTitle from './commonTitleBottom.vue';
import react from '../../../assets/img/react.png'
import { fontSize } from "@/utils/fonSize";
import { onMounted, ref } from 'vue';
import  { getScan } from  '../../../api/index'
const useChart = ref(null)
onMounted(()=>{
  let a =  "u7NbzWVam1ygYSuMc/FM9QXDRlkW5wGPHIhDB8oF+kCB/BASO+LRYoOjpLBQl4BSkSPm2tAEbD0NVvtZXdVI3jbhQPXCsq+y5844iRiGJyZKWlEZKbl/hX1dmk5l9aefUQfmfB0+3WfKEkJYBjpE0Ed/vZf8MM25DbE7M/HrfbRnl2W1esuOBSeBVa8CiI4LJITUswmzN22UcobBpoy98I3g/RXzA+sio71skLyCt1xcNQ09mdNcFVledUI1i4pC"
  getScan({param: a})
  var myChart = echarts.init(useChart.value);
  let msg = {
    "data": [
      25,
      35.5,
      46.5,
      56.5,
      63.5,
      67.5,
      77.5,
      90
    ],
    "total": 100,
    "percentdata": [
      "32%",
      "40%",
      "50%",
      "65%",
      "70%",
      "75%",
      "80%",
      "90%"
    ],
    "leftname": [
      "古溪镇",
      "分界镇",
      "新街镇",
      "黄桥镇",
      "曲霞镇",
      "虹桥镇",
      "滨江镇",
      "泰州市"
    ]
  }
  let data = [];
  let totaldata = [];
  let percentdata = [];
  msg.data.forEach(value=>{
    totaldata.push(81.3);
    data.push(81.3 * value / 100);
    percentdata.push(Math.round(value / msg.total * 100) + "%");
  })
  console.log('data',data)
  console.log('percentdata',percentdata)
  console.log('totaldata',totaldata)
  var fillImg = '';
  var option = {
    grid: {
      top: '2%',
      left: '20%',
      bottom: 10
    },
    xAxis: [{
      show: false,
    }],
    yAxis: [{
      axisTick: 'none',
      axisLine: 'none',
      offset: '10',
      axisLabel: {
        margin: 12,
        textStyle: {
          color: '#ABD7FF',
          fontSize: '14',
        }
      },
      data: msg.leftname
    },
      {
        axisTick: 'none',
        axisLine: 'none',
        type: 'category',
        axisLabel: {
          margin: -31,
          textStyle: {
            color: '#ABD7FF',
            fontSize: '16',
          }
        },
        data: percentdata,
      },
      {
        name: '',
        nameGap: '50',
        nameTextStyle: {
          color: '#000',
          fontSize: '16',
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(0,0,0,0)'
          }
        },
        data: [],
      }
    ],
    series: [{
      name: '', // blue bar
      type: 'pictorialBar',
      symbol: 'image://' + fillImg,
      barWidth: '100%',
      symbolOffset: [5, 0],
      itemStyle: {
        normal: {
          barBorderRadius: 5,
          color: '#6DE8FA'
        }
      },
      symbolSize: ['67%', 13],
      symbolBoundingData: 100,
      symbolClip: true,
      data: data,
      label: {
        normal: {
          show: false,
        }
      },
      animationEasing: 'elasticOut',
    },
      {
        name: '外框',
        type: 'bar',
        yAxisIndex: 2,
        barGap: '-100%',
        data: totaldata,
        barWidth: 20,
        // barCategoryGap:'200',
        itemStyle: {
          normal: {
            color: '#131a27', //填充色
            barBorderColor: '#c7cad0', //边框色
            barBorderWidth: 1, //边框宽度
            barBorderRadius: 0, //圆角半径
            label: { //标签显示位置
              show: false,
              position: 'top' //insideTop 或者横向的 insideLeft
            }
          }
        },
        z: 0
      }
    ]
  };
  option && myChart.setOption(option);
  window.addEventListener('resize',()=>{
    myChart.resize()
  })

})
</script>
<style lang="scss" scoped>
.content-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .chart-wrapper {
    flex: 1;
    width: 100%;
  }
}
</style>
